<template>
  <div class="outter">
    <div class="box" v-for="item in order" :key="item.table">
      <div class="tablenum">{{item.table}}</div>
      <div class="order">
        <a-checkbox-group v-model="item.selected" :options="item.options" @change="onChange(item)" />
      </div> 
      <div :class="(item.checkAll===true?'orderfinsh':'orderdetail')">
        <div class="ordernum">by {{item.chief}}</div>
        <div class="ordernum">订单号：{{item.num}}</div>
        <div class="ordernum">订单时间:{{item.time}}</div>
        <div class="state">{{item.checkAll===true?'已完成':'未完成'}}</div>  
      </div> 
    </div>  
  </div>  
</template>

<script>
export default {
  data(){
    return{
      checkAll:false,
      order:[{
        table:"B2",
        checkAll:false,
        chief:"卢大厨",
        time:"2022-10-2 19:02:20",
        options:["牛肉asdasdasdas 2份","汉堡 3份","牛肉 2份"],
        num:"2626222151",
        selected:[]
      },
      {
        table:"A2",
        chief:"李大厨",
        checkAll:false,
        time:"2022-11-2 19:02:20",
        options:["汉堡 3份","牛肉asdasdasdas 2份","牛肉 2份"],
        num:"26262221sad51",
        selected:[]
      },
      {
        table:"B33",
        chief:"周大厨",
        checkAll:false,
        time:"2022-10-2 19:02:20",
        options:["牛肉asdasdasdas 2份"],
        num:"26262sad22151",
        selected:[]
      }]
      
    }
  },
  methods:{
    onChange(item) {
      console.log(item)
      item.checkAll = item.selected.length ===item.options.length;
    },
  }
}
</script>

<style scoped>
.outter{
  width: 98%;
  padding: 30px;

}
.box{
  border-radius: 20px;
  width: 90%;
  margin: 0 auto 30px;
  height: 125px;
  display: flex;
  flex-direction: row;
}
.tablenum{
  width: 18%;
  text-align: center;
  line-height: 125px;
  font-size: 28px;
  color:white;
  background-color: rgb(44,44,44);
  border-radius: 20px 0 0 20px;
}
.order{
  width: 50%;
  padding: 20px;
  overflow: scroll;
  background-color: white;
  border-radius: 0 30px 30px 0;
}
.orderdetail{
  width:32%;
  padding: 10px;
  background-color: rgb(44,44,44);
  color:white;
  
  border-radius: 20px;
}
.orderfinsh{
  width:32%;
  padding: 10px;
  background-color: white;
  color:rgb(44,44,44);
  
  border-radius: 20px;
}
.ordernum{
  text-align: center;
  font-size: 15px;
}
.state{
  width: 40%;
  line-height: 20px;
  border-radius: 20px;
  text-align: center;
  font-size:19px;
  margin:5px auto;
  font-weight: 900;
}

</style>